<template>
  <!-- 医生号源登记详情 -->
  <el-dialog title="医生号源登记详情" :visible="value" width="718px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <el-form :inline="true">
      <el-form-item>
        <el-radio-group v-model="form.timeId" @change="onSearch">
          <el-radio label="">全部</el-radio>
          <el-radio v-for="(item,index) in scheduleTimes" :key="index" :label="item.id">{{item.startTime}}~{{item.endTime}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" native-type="submit" circle icon="el-icon-search"></el-button>
      </el-form-item> -->
    </el-form>
    <ul class="ul-box">
      <template v-for="(item,index) in tableList">
        <li v-if="item.patientInfo">
          <img v-if="item.patientInfo.head" :src="item.head|imageUrl" alt="">
          <img v-else src="@/img/unknown-avatar.png" alt="">
          <div style="padding-top:7px;">
            <div style="line-height:20px;">{{item.sourceCode}}</div>
            <div style="line-height:20px;">{{item.patientInfo.name}}</div>
            <div style="line-height:20px;">{{item.startTime}}~{{item.endTime}}</div>
            <div class="success-color" style="line-height:20px;">{{item.registerRecord.status|changeAssist(statusEnum)}}</div>
          </div>
        </li>
        <li v-else @click="onRegister(item)">
          <img src="@/img/unknown-avatar.png" alt="">
          <div style="padding-top:7px;">
            <div style="line-height:20px;">&nbsp;</div>
            <div style="line-height:20px;" class="error-color">{{isDisabled(item.endTime)?"已过期":"未登记"}}</div>
            <div style="line-height:20px;">&nbsp;</div>
            <div style="line-height:20px;">&nbsp;</div>
          </div>
        </li>
      </template>
    </ul>
    <userOperate v-model="userOperate" :curItem="sourceId" mode="1" @success="getData"></userOperate>
  </el-dialog>
</template>
<script>
export default {
  props: ["curItem", "value"],
  components: {
    userOperate: () => import("./userOperate.vue")
  },
  data() {
    return {
      sourceId: "",
      userOperate: false,
      oldTableData: [],
      tableList: [],
      scheduleTimes: [],
      form: {
        timeId: ""
      },
      curDate: new Date(),
      pager: { pageSize: 100, pageNum: 1, total: 0 },
      statusEnum: []
    };
  },
  mounted() {
    let th = this;
    th.getCommonConfigByKey("预约状态").then(res => {
      th.statusEnum = res;
    });
  },
  methods: {
    getData() {
      let th = this;
      let j = {
        doctorId: th.curItem.id
      };
      Object.assign(j, th.pager);
      th.$api.getSourceInfoByDoctorAbout(j).then(res => {
        if (res.executed) {
          th.tableList = res.dataBody.pageInfo.list;
          th.oldTableData = res.dataBody.pageInfo.list;
          th.scheduleTimes = res.dataBody.scheduleTimes;
        }
      });
    },
    //登记
    onRegister(obj) {
      let th = this;
      // let isDisabled = th.isDisabled(obj.endTime);
      // if (isDisabled) {
      //   return;
      // }
      th.sourceId = obj.id;
      th.userOperate = true;
    },
    onSearch() {
      let th = this;
      if (th.form.timeId == "") {
        th.tableList = th.oldTableData;
        return;
      }
      th.tableList = th.oldTableData.filter(item => {
        return item.timeId == th.form.timeId;
      });
    },
    //判断过期
    isDisabled(endTime) {
      let th = this;
      let endTimeArr = endTime.split(":");
      let date1 = new Date();
      let date2 = new Date();
      date2.setHours(endTimeArr[0]);
      date2.setMinutes(endTimeArr[1]);
      if (date2.getTime() < date1.getTime()) {
        return true;
      } else return false;
    },
    onOpen() {
      let th = this;
      th.getData();
    },
    onClose() {
      let th = this;
      th.form.timeId = "";
      th.tableList = [];
      th.scheduleTimes = [];
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.ul-box {
  margin: 0;
  padding: 0;
  > li {
    width: 120px;
    margin-right: 15px;
    margin-bottom: 15px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 5px;
    float: left;
    cursor: pointer;
    padding: 10px;
    list-style: none;
    overflow: hidden;
    &:hover {
      box-shadow: 0 0 5px 2px #ccc;
    }
    &:nth-child(5n) {
      margin-right: 0;
    }
    img {
      width: 100%;
      height: 90px;
      object-fit: cover;
    }
  }
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}
</style>